<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>脚手架开发 | lowcode</title>
    <meta name="description" content="">
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/assets/logo.png">
    <meta name="description" content="低代码工具">
    <meta name="referrer" content="never">
    <meta name="keywords" content="lowcode">
    <link rel="preload" href="/assets/css/0.styles.9b0a5037.css" as="style"><link rel="preload" href="/assets/js/app.9e4f828f.js" as="script"><link rel="preload" href="/assets/js/2.63a13152.js" as="script"><link rel="preload" href="/assets/js/11.c8692837.js" as="script"><link rel="prefetch" href="/assets/js/10.21256974.js"><link rel="prefetch" href="/assets/js/12.f3273b7c.js"><link rel="prefetch" href="/assets/js/13.4485523d.js"><link rel="prefetch" href="/assets/js/14.b5a376cd.js"><link rel="prefetch" href="/assets/js/15.f3c4584a.js"><link rel="prefetch" href="/assets/js/16.2d7cc251.js"><link rel="prefetch" href="/assets/js/17.8b66ec9b.js"><link rel="prefetch" href="/assets/js/3.cf42858e.js"><link rel="prefetch" href="/assets/js/4.0301f468.js"><link rel="prefetch" href="/assets/js/5.cfdf5b5e.js"><link rel="prefetch" href="/assets/js/6.3c92ec7c.js"><link rel="prefetch" href="/assets/js/7.9cd0ba8d.js"><link rel="prefetch" href="/assets/js/8.71b6f748.js"><link rel="prefetch" href="/assets/js/9.b2f4095e.js">
    <link rel="stylesheet" href="/assets/css/0.styles.9b0a5037.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="ant-row"><div class="nav-button"><i aria-label="icon: bars" class="anticon anticon-bars"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="bars" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path></svg></i> <span></span></div> <div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a href="/" class="router-link-active home-link"><img src="/assets/logo.png" alt="lowcode" class="logo"> <span class="site-name">lowcode</span></a> <div class="search-box mobile-search"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div> <div class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><ul role="menu" id="nav" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/" class="router-link-active">
          首页
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item ant-menu-item-selected"><a href="/lowcode-vscode/" class="router-link-active">
          lowcode-vscode
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/lowcode-mock/">
          lowcode-mock
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="https://lowcoding.gitee.io/" target="_blank">
          国内镜像
          <i aria-label="icon: link" class="anticon anticon-link"><svg viewBox="64 64 896 896" focusable="false" data-icon="link" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"></path></svg></i></a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul> <a href="https://github.com/lowcoding" target="_blank" rel="noopener noreferrer" class="repo-link"><i aria-label="icon: github" class="anticon anticon-github"><svg viewBox="64 64 896 896" focusable="false" data-icon="github" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path></svg></i></a></nav></div></div> <!----></header> <aside class="sidebar"><div><div class="promo"><div id="promo_3"><div class="promo_title">赞助商</div> <button type="button" class="ant-btn ant-btn-primary ant-btn-background-ghost"><span>成为赞助商</span></button></div></div> <div role="separator" id="reset-margin" class="ant-divider ant-divider-horizontal ant-divider-dashed"></div></div> <ul class="sidebar-links"><li><a href="/lowcode-vscode/" aria-current="page" title="关于" class="sidebar-link">关于</a></li><li><a href="/lowcode-vscode/getting-started.html" title="快速上手" class="sidebar-link">快速上手</a></li><li><section class="sidebar-group depth-0"><a href="/lowcode-vscode/detailed-features/" class="sidebar-heading clickable"><span>具体功能及使用指南</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/lowcode-vscode/detailed-features/generate-code-by-command.html" title="生成代码" class="sidebar-link">生成代码</a></li><li><a href="/lowcode-vscode/detailed-features/generate-code-by-webview.html" title="可视化生成代码" class="sidebar-link">可视化生成代码</a></li><li><a href="/lowcode-vscode/detailed-features/quick-add-snippet.html" title="添加代码片段" class="sidebar-link">添加代码片段</a></li></ul></section></li><li><a href="/lowcode-vscode/create-materials.html" title="物料开发" class="sidebar-link">物料开发</a></li><li><a href="/lowcode-vscode/create-scaffold.html" aria-current="page" title="脚手架开发" class="active sidebar-link">脚手架开发</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/lowcode-vscode/create-scaffold.html#安装使用" title="安装使用" class="sidebar-link">安装使用</a></li><li class="sidebar-sub-header"><a href="/lowcode-vscode/create-scaffold.html#制作脚手架" title="制作脚手架" class="sidebar-link">制作脚手架</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/lowcode-vscode/create-scaffold.html#配置" title="配置" class="sidebar-link">配置</a></li><li class="sidebar-sub-header"><a href="/lowcode-vscode/create-scaffold.html#本地调试脚手架" title="本地调试脚手架" class="sidebar-link">本地调试脚手架</a></li><li class="sidebar-sub-header"><a href="/lowcode-vscode/create-scaffold.html#参考项目" title="参考项目" class="sidebar-link">参考项目</a></li></ul></li><li class="sidebar-sub-header"><a href="/lowcode-vscode/create-scaffold.html#发布脚手架" title="发布脚手架" class="sidebar-link">发布脚手架</a></li><li class="sidebar-sub-header"><a href="/lowcode-vscode/create-scaffold.html#使用脚手架" title="使用脚手架" class="sidebar-link">使用脚手架</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/lowcode-vscode/create-scaffold.html#直接使用-git-仓库地址" title="直接使用 git 仓库地址" class="sidebar-link">直接使用 git 仓库地址</a></li><li class="sidebar-sub-header"><a href="/lowcode-vscode/create-scaffold.html#分享到模板列表中快速创建" title="分享到模板列表中快速创建" class="sidebar-link">分享到模板列表中快速创建</a></li></ul></li><li class="sidebar-sub-header"><a href="/lowcode-vscode/create-scaffold.html#实现原理" title="实现原理" class="sidebar-link">实现原理</a></li></ul></li><li><a href="/lowcode-vscode/config.html" title="插件配置" class="sidebar-link">插件配置</a></li><li><a href="/lowcode-vscode/change-log.html" title="更新日志" class="sidebar-link">更新日志</a></li><li><a href="/lowcode-vscode/todo.html" title="TODO" class="sidebar-link">TODO</a></li></ul></aside> <main class="page"> <div class="theme-antdocs-content content__default"><p>提到脚手架，大家想到的可能就是各种 xxx-cli，本文介绍的是另一种方式：以 vscode 插件的形式实现，提供 web 可视化操作，如下图：</p> <p><img src="https://fastly.jsdelivr.net/gh/migrate-gitee/img-host//2022/03/29/1648566794765.gif" alt=""></p> <p>下面介绍如何安装使用，以及实现原理。</p> <h2 id="安装使用">安装使用 <a href="#安装使用" class="header-anchor">#</a></h2> <p>vscode 安装 <a href="https://marketplace.visualstudio.com/items?itemName=wjkang.lowcode" target="_blank" rel="noopener noreferrer">lowcode<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 插件，此插件是一个效率工具，脚手架只是其中一个功能，更多功能可以查看<a href="https://lowcoding.github.io/" target="_blank" rel="noopener noreferrer">文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，这集只讲脚手架相关的。</p> <p>插件安装之后，打开脚手架界面，步骤如下图：</p> <p><img src="https://fastly.jsdelivr.net/gh/migrate-gitee/img-hosting/2022/03/30/1648608016821.png" alt=""></p> <p>可以直接使用分享的脚手架，勾选选项后直接创建即可：</p> <p><img src="https://fastly.jsdelivr.net/gh/migrate-gitee/img-hosting/2022/03/30/1648608248392.png" alt=""></p> <h2 id="制作脚手架">制作脚手架 <a href="#制作脚手架" class="header-anchor">#</a></h2> <p>在模板项目根目录下创建 <code>lowcode.scaffold.config.json</code> 文件，将需要做内容动态替换的文件加上 <code>.ejs</code> 后缀。</p> <p><a href="https://ejs.bootcss.com/" target="_blank" rel="noopener noreferrer">ejs 语法<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><img src="https://fastly.jsdelivr.net/gh/migrate-gitee/img-host//2022/03/29/1648565022174.png" alt=""></p> <h3 id="配置">配置 <a href="#配置" class="header-anchor">#</a></h3> <p>一个完整 <code>lowcode.scaffold.config.json</code> 配置：</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
	<span class="token property">&quot;formSchema&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
		<span class="token property">&quot;schema&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
			<span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;object&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;ui:displayType&quot;</span><span class="token operator">:</span> <span class="token string">&quot;row&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;ui:showDescIcon&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
			<span class="token property">&quot;properties&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
				<span class="token property">&quot;port&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
					<span class="token property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;监听端口&quot;</span><span class="token punctuation">,</span>
					<span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;string&quot;</span><span class="token punctuation">,</span>
					<span class="token property">&quot;props&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token property">&quot;default&quot;</span><span class="token operator">:</span> <span class="token string">&quot;3000&quot;</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token property">&quot;https&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
					<span class="token property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;https&quot;</span><span class="token punctuation">,</span>
					<span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;boolean&quot;</span><span class="token punctuation">,</span>
					<span class="token property">&quot;ui:widget&quot;</span><span class="token operator">:</span> <span class="token string">&quot;switch&quot;</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token property">&quot;lint&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
					<span class="token property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;eslint + prettier&quot;</span><span class="token punctuation">,</span>
					<span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;boolean&quot;</span><span class="token punctuation">,</span>
					<span class="token property">&quot;ui:widget&quot;</span><span class="token operator">:</span> <span class="token string">&quot;switch&quot;</span><span class="token punctuation">,</span>
					<span class="token property">&quot;default&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token property">&quot;noREADME&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
					<span class="token property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;移除README文件&quot;</span><span class="token punctuation">,</span>
					<span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;boolean&quot;</span><span class="token punctuation">,</span>
					<span class="token property">&quot;ui:widget&quot;</span><span class="token operator">:</span> <span class="token string">&quot;switch&quot;</span><span class="token punctuation">,</span>
					<span class="token property">&quot;ui:width&quot;</span><span class="token operator">:</span> <span class="token string">&quot;100%&quot;</span><span class="token punctuation">,</span>
					<span class="token property">&quot;ui:labelWidth&quot;</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
					<span class="token property">&quot;ui:hidden&quot;</span><span class="token operator">:</span> <span class="token string">&quot;{{rootValue.emptyREADME === true}}&quot;</span><span class="token punctuation">,</span>
					<span class="token property">&quot;default&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token property">&quot;emptyREADME&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
					<span class="token property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;空README文件&quot;</span><span class="token punctuation">,</span>
					<span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;boolean&quot;</span><span class="token punctuation">,</span>
					<span class="token property">&quot;ui:widget&quot;</span><span class="token operator">:</span> <span class="token string">&quot;switch&quot;</span><span class="token punctuation">,</span>
					<span class="token property">&quot;ui:hidden&quot;</span><span class="token operator">:</span> <span class="token string">&quot;{{rootValue.noREADME === true}}&quot;</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			<span class="token property">&quot;labelWidth&quot;</span><span class="token operator">:</span> <span class="token number">120</span><span class="token punctuation">,</span>
			<span class="token property">&quot;displayType&quot;</span><span class="token operator">:</span> <span class="token string">&quot;row&quot;</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token property">&quot;formData&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
			<span class="token property">&quot;port&quot;</span><span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span>
			<span class="token property">&quot;https&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
			<span class="token property">&quot;lint&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
			<span class="token property">&quot;noREADME&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
			<span class="token property">&quot;emptyREADME&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token property">&quot;excludeCompile&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;codeTemplate/&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;materials/&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
	<span class="token property">&quot;conditionFiles&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
		<span class="token property">&quot;noREADME&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
			<span class="token property">&quot;value&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
			<span class="token property">&quot;exclude&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;README.md.ejs&quot;</span><span class="token punctuation">]</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token property">&quot;lint&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
			<span class="token property">&quot;value&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
			<span class="token property">&quot;exclude&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;.eslintrc.js&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;.prettierrc.js&quot;</span><span class="token punctuation">]</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p><code>formSchema</code>：</p> <p><code>formSchema.schema</code> 为 <a href="https://x-render.gitee.io/generator/playground" target="_blank" rel="noopener noreferrer">x-render 表单设计器<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 导出的的 schema，会根据 schema 构建出表单界面，<code>formSchema.formData</code> 为表单默认数据</p> <p><img src="https://fastly.jsdelivr.net/gh/migrate-gitee/img-host//2022/03/29/1648565391753.png" alt=""></p> <p>创建项目的时候会将表单数据传入 ejs 模板中进行编译。</p> <p><code>excludeCompile</code>：配置不需要经过 ejs 编译的文件夹或文件。</p> <p><code>conditionFiles</code>：根据表单项的值，在创建项目的时候将某些文件夹或文件删除，比如：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token string-property property">&quot;conditionFiles&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
	<span class="token string-property property">&quot;noREADME&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
		<span class="token string-property property">&quot;value&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
		<span class="token string-property property">&quot;exclude&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;README.md.ejs&quot;</span><span class="token punctuation">]</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token string-property property">&quot;lint&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
		<span class="token string-property property">&quot;value&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
		<span class="token string-property property">&quot;exclude&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;.eslintrc.js&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;.prettierrc.js&quot;</span><span class="token punctuation">]</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>当 <code>lint</code> 这个表单项的值为 <code>false</code> 的时候，配置的文件夹或文件 &quot;.eslintrc.js&quot;，&quot;.prettierrc.js&quot;，将会在创建的项目中排除掉。</p> <h3 id="本地调试脚手架">本地调试脚手架 <a href="#本地调试脚手架" class="header-anchor">#</a></h3> <p><img src="https://fastly.jsdelivr.net/gh/migrate-gitee/img-hosting/2022/03/30/1648609138759.png" alt=""></p> <h3 id="参考项目">参考项目 <a href="#参考项目" class="header-anchor">#</a></h3> <p><a href="https://github.com/lowcode-scaffold/lowcode-mock" target="_blank" rel="noopener noreferrer">https://github.com/lowcode-scaffold/lowcode-mock<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="发布脚手架">发布脚手架 <a href="#发布脚手架" class="header-anchor">#</a></h2> <p>将脚手架提交到 git 仓库，注意开放项目的公开访问权限。</p> <h2 id="使用脚手架">使用脚手架 <a href="#使用脚手架" class="header-anchor">#</a></h2> <h3 id="直接使用-git-仓库地址">直接使用 git 仓库地址 <a href="#直接使用-git-仓库地址" class="header-anchor">#</a></h3> <p><img src="https://fastly.jsdelivr.net/gh/migrate-gitee/img-host/2021/07/12/1626103888745.png" alt=""></p> <blockquote><p>注意使用 clone 地址，支持指定分支，比如 <code>-b master https://github.com/lowcode-scaffold/lowcode-mock.git</code></p></blockquote> <p><img src="https://fastly.jsdelivr.net/gh/migrate-gitee/img-host//2022/03/29/1648566794765.gif" alt=""></p> <h3 id="分享到模板列表中快速创建">分享到模板列表中快速创建 <a href="#分享到模板列表中快速创建" class="header-anchor">#</a></h3> <p><img src="https://fastly.jsdelivr.net/gh/migrate-gitee/img-host//2022/03/29/1648567141626.png" alt=""></p> <p>修改 <a href="https://github.com/lowcoding/scaffold" target="_blank" rel="noopener noreferrer">仓库<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 中 <code>index.json</code> 内容，提交 pr。</p> <h2 id="实现原理">实现原理 <a href="#实现原理" class="header-anchor">#</a></h2> <ol><li>打开 webview 的时候从 cdn 拉取记录了脚手架列表的 json 文件，渲染列表视图。</li> <li>点击某个脚手架，将脚手架的 git 仓库地址传到插件后台，插件后台根据 git 地址下载模版到临时工作目录，并且读取 <code>lowcode.scaffold.config.json</code> 文件中的 <code>formSchema</code> 返回给 webview。</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">downloadScaffoldFromGit</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">remote</span><span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
	fs<span class="token punctuation">.</span><span class="token function">removeSync</span><span class="token punctuation">(</span>tempDir<span class="token punctuation">.</span>scaffold<span class="token punctuation">)</span><span class="token punctuation">;</span>
	execa<span class="token punctuation">.</span><span class="token function">sync</span><span class="token punctuation">(</span><span class="token string">&quot;git&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">&quot;clone&quot;</span><span class="token punctuation">,</span> <span class="token operator">...</span>remote<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot; &quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> tempDir<span class="token punctuation">.</span>scaffold<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	fs<span class="token punctuation">.</span><span class="token function">removeSync</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>tempDir<span class="token punctuation">.</span>scaffold<span class="token punctuation">,</span> <span class="token string">&quot;.git&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token keyword">if</span> <span class="token punctuation">(</span>
		fs<span class="token punctuation">.</span><span class="token function">existsSync</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>tempDir<span class="token punctuation">.</span>scaffold<span class="token punctuation">,</span> <span class="token string">&quot;lowcode.scaffold.config.json&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
	<span class="token punctuation">)</span> <span class="token punctuation">{</span>
		<span class="token keyword">return</span> fs<span class="token punctuation">.</span><span class="token function">readJSONSync</span><span class="token punctuation">(</span>
			path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>tempDir<span class="token punctuation">.</span>scaffold<span class="token punctuation">,</span> <span class="token string">&quot;lowcode.scaffold.config.json&quot;</span><span class="token punctuation">)</span>
		<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	<span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><ol start="3"><li>webview 拿到 <code>formSchema</code> 后弹框渲染动态表单，点提交后将动态表单数据以及生成目录等信息传给插件后台。</li> <li>插件后台拿到表单数据后，到临时目录中根据 <code>conditionFiles</code> 配置删除掉不需要的文件。然后根据表单数据编译所有 <code>ejs</code> 文件，最后将所有文件拷贝到生成目录。</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">compileScaffold</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">model</span><span class="token operator">:</span> any<span class="token punctuation">,</span> <span class="token literal-property property">createDir</span><span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
	<span class="token keyword">if</span> <span class="token punctuation">(</span>
		fs<span class="token punctuation">.</span><span class="token function">existsSync</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>tempDir<span class="token punctuation">.</span>scaffold<span class="token punctuation">,</span> <span class="token string">&quot;lowcode.scaffold.config.json&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
	<span class="token punctuation">)</span> <span class="token punctuation">{</span>
		<span class="token keyword">const</span> config <span class="token operator">=</span> fs<span class="token punctuation">.</span><span class="token function">readJSONSync</span><span class="token punctuation">(</span>
			path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>tempDir<span class="token punctuation">.</span>scaffold<span class="token punctuation">,</span> <span class="token string">&quot;lowcode.scaffold.config.json&quot;</span><span class="token punctuation">)</span>
		<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token keyword">const</span> <span class="token literal-property property">excludeCompile</span><span class="token operator">:</span> string<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> config<span class="token punctuation">.</span>excludeCompile <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
		<span class="token keyword">if</span> <span class="token punctuation">(</span>config<span class="token punctuation">.</span>conditionFiles<span class="token punctuation">)</span> <span class="token punctuation">{</span>
			Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>model<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
				<span class="token keyword">if</span> <span class="token punctuation">(</span>
					config<span class="token punctuation">.</span>conditionFiles<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span>
					config<span class="token punctuation">.</span>conditionFiles<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">.</span>value <span class="token operator">===</span> model<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span>
					Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>config<span class="token punctuation">.</span>conditionFiles<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">.</span>exclude<span class="token punctuation">)</span>
				<span class="token punctuation">)</span> <span class="token punctuation">{</span>
					config<span class="token punctuation">.</span>conditionFiles<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">.</span>exclude<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">exclude</span><span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
						fs<span class="token punctuation">.</span><span class="token function">removeSync</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>tempDir<span class="token punctuation">.</span>scaffold<span class="token punctuation">,</span> exclude<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
					<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token keyword">await</span> <span class="token function">renderEjsTemplates</span><span class="token punctuation">(</span>model<span class="token punctuation">,</span> tempDir<span class="token punctuation">.</span>scaffold<span class="token punctuation">,</span> excludeCompile<span class="token punctuation">)</span><span class="token punctuation">;</span>
		fs<span class="token punctuation">.</span><span class="token function">removeSync</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>tempDir<span class="token punctuation">.</span>scaffold<span class="token punctuation">,</span> <span class="token string">&quot;lowcode.scaffold.config.json&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	fs<span class="token punctuation">.</span><span class="token function">copySync</span><span class="token punctuation">(</span>tempDir<span class="token punctuation">.</span>scaffold<span class="token punctuation">,</span> createDir<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><blockquote><p>本地调试时，就是在步骤 2 中将选择的文件夹内容或者当前 vscode 打开的项目内容拷贝到临时工作目录。</p></blockquote> <p><img src="https://fastly.jsdelivr.net/gh/migrate-gitee/img-hosting/2022/03/30/1648622682307.png" alt=""></p> <p>下集再说插件其他功能，插件源码：<a href="https://github.com/lowcoding/lowcode-vscode" target="_blank" rel="noopener noreferrer">https://github.com/lowcoding/lowcode-vscode<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">5/21/2022, 8:45:47 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><a href="/lowcode-vscode/create-materials.html" class="prev"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>
        物料开发
      </a></span> <span class="next"><a href="/lowcode-vscode/config.html">
        插件配置
        <i aria-label="icon: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></span></p></div> </main> <!----></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.9e4f828f.js" defer></script><script src="/assets/js/2.63a13152.js" defer></script><script src="/assets/js/11.c8692837.js" defer></script>
  </body>
</html>